<template>
    <div class="contain-edit project-detail">
       <div class="header">
           <p>项目管理>>查看</p>
           <el-button type="primary" @click="$router.push('/projectList')">返回</el-button>
       </div>
       <div class="main">
           <div class="main-wrap">
               <div class="box">
                   <div class="main-list box box-align-center">
                       <div class="name">产品图片</div>
                       <div class="value box box-align-center">
                          <div style="height:90px;" v-if="info.imageUrls&&info.imageUrls.length"> <img  @click="imgClick(item.url)" v-for="(item,index) in info.imageUrls" :key="index" :src="item.url" alt=""></div>
                       </div>
                   </div>
                   <div class="main-list box box-align-center">
                       <div class="name">项目名称</div>
                       <div class="value">{{info.projectName}}</div>
                   </div>
               </div>
               <div class="box">
                   <div class="main-list box box-align-center">
                       <div class="name">项目等级</div>
                       <div class="value">{{info.levelName}}</div>
                   </div>
                   <div class="main-list box box-align-center">
                       <div class="name">项目阶段</div>
                       <div class="value">{{info.phaseName}}</div>
                   </div>
               </div>
               <div class="box">
                   <div class="main-list box box-align-center">
                       <div class="name">项目类型</div>
                       <div class="value">{{info.typeName}}</div>
                   </div>
                   <div class="main-list box box-align-center">
                       <div class="name">重点项目</div>
                       <div class="value">{{info.isImportant == 'y'?'是':''}}</div>
                   </div>
               </div>
           </div>
           <div class="main-body">
               <div class="body-list box">
                   <div class="body-left box  box-pack-center  box-align-center">项目组别</div>
                   <div class="body-right">
                       <div class="right-menu">
                           <div class="menu-head box">
                               <div class="head-title box box-pack-center  box-align-center">项目组别</div>
                               <div class="head-title box box-pack-center  box-align-center">成员</div>
                               <div class="head-title box box-pack-center  box-align-center">工牌</div>
                               <div class="head-title box box-pack-center  box-align-center">等级</div>
                               <div class="head-title box box-pack-center  box-align-center">角色</div>
                               <div class="head-title box box-pack-center  box-align-center">负责部件</div>
                               <div class="head-title box box-pack-center  box-align-center">部件状态</div>
                               <div class="head-title box box-pack-center  box-align-center">所用工具</div>
                               <div class="head-title box box-pack-center  box-align-center">目标分值</div>
                               <div class="head-title box box-pack-center  box-align-center">获得分值</div>
                               <div class="head-title box box-pack-center  box-align-center">奖金</div>
                               <div class="head-title box box-pack-center  box-align-center"></div>
                           </div>
                           <div class="menu-wrap box">
                               <!-- <div class="wrap-left box  box-pack-center  box-align-center">{{info.groupName}}</div> -->
                               <div class="wrap-right">
                                   <div v-for="(item,index) in info.staffDTOList" :key="index" class="right-list box">
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.groupName}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.staffName}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.workCard}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.levelName}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{returnRole(item.roleCode)}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.partsName}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{returnStatus(item.partsStatusCode)}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{returnTool(item.toolCode)}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.targetScore}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.getScore}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">{{item.getScore*100}}</div>
                                       <div class="wrap-val box  box-pack-center  box-align-center">
                                           <div @click="reply(item.id)" class="reply-btn">评价</div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="body-list box">
                   <div class="lists box">
                       <div class="name box box-pack-center  box-align-center">荣誉徽章</div>
                       <div class="value box box-pack-center  box-align-center">
                            {{info.efficiencyName?info.efficiencyName:''}}
                       </div>
                   </div>
                   <div class="lists box">
                       <div class="name box box-pack-center  box-align-center">项目分值</div>
                       <div class="value box box-pack-center  box-align-center">
                           {{info.getScore}}
                       </div>
                   </div>
               </div>
               <div class="body-list box">
                   <div class="body-left box  box-pack-center  box-align-center">开发时间</div>
                   <div class="body-right">
                      <div v-if="item.title" v-for="(item,index) in info.projectTimes" :key="index"  class="date-item box">
                          <div class="date-list box  box-pack-center  box-align-center">{{item.title}}</div>
                          <div class="date-list box  box-pack-center  box-align-center">{{item.startTime == '1970-01-01 00:00:00'?'':item.startTime.split(' ')[0]}}</div>
                          <div class="date-list box  box-pack-center  box-align-center">{{item.endTime== '1970-01-01 00:00:00'?'':item.endTime.split(' ')[0]}}</div>
                      </div>
                   </div>
               </div>
               <div class="body-list box">
                   <div class="lists box">
                       <div class="name box box-pack-center  box-align-center">项目计划详情</div>
                       <div class="value box box-pack-center  box-align-center">
                           <a :href="info.planUrl?info.planUrl.url:''">{{info.planFileName}}</a>
                       </div>
                   </div>
                   <div class="lists dates box">
                       <div class="name box box-pack-center  box-align-center">最新需求变更日期</div>
                       <div class="value box box-pack-center  box-align-center">
                           {{info.changeDate?info.changeDate.split(' ')[0]:''}}
                       </div>
                   </div>
               </div>
               <div class="body-list  box">
                   <div class="detail-left box box-pack-center  box-align-center">最新需求变更内容</div>
                   <div class="detail-value">{{info.changeContent}}</div>
               </div>
               <div class="body-list  box">
                   <div class="detail-left box box-pack-center  box-align-center">备注</div>
                   <div class="detail-value">{{info.remark}}</div>
               </div>
               <div class="body-list  box">
                   <div class="detail-left box box-pack-center  box-align-center">订单信息</div>
                   <div class="detail-value">{{info.orderInfo}}</div>
               </div>
               <div class="body-list  box">
                   <div class="detail-left box box-pack-center  box-align-center">本项目任务汇总</div>
                   <div class="total-value">
                       <div class="total-item box head">
                           <div class="total-list box  box-pack-center  box-align-center">总任务</div>
                           <div class="total-list box  box-pack-center  box-align-center">超速完成</div>
                           <div class="total-list box  box-pack-center  box-align-center">正常完成</div>
                           <div class="total-list box  box-pack-center  box-align-center">延期完成</div>
                           <div class="total-list box  box-pack-center  box-align-center">异常</div>
                           <div class="total-list box  box-pack-center  box-align-center">未完成</div>
                       </div>
                        <div class="total-item box  box-pack-center  box-align-center">
                           <div class="total-list box  box-pack-center  box-align-center">{{info.totalTask}}</div>
                           <div class="total-list box  box-pack-center  box-align-center">{{info.overSpeedTask}}</div>
                           <div class="total-list box  box-pack-center  box-align-center">{{info.normalTask}}</div>
                           <div class="total-list box  box-pack-center  box-align-center">{{info.delayTask}}</div>
                           <div class="total-list box  box-pack-center  box-align-center">{{info.abnormalTask}}</div>
                           <div class="total-list box  box-pack-center  box-align-center">{{info.unfinishedTask}}</div>
                        </div>
                   </div>
               </div>
           </div>
       </div>  
        <el-dialog
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <img style="width: 100%" :src="imgUrl" alt="">
        </el-dialog>
        <el-dialog
            title="评分"
            :visible.sync="dialogVisible1"
            width="30%"
            >
            <div class="dialog-content">
                <el-form :model="infos" :rules="rules" ref="infos" label-width="120px" class="" @submit.native.prevent>
                    <el-form-item label="请输入分值：" prop="score">
                        <el-input v-model.number="infos.score" placeholder="请输入分值："></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('infos')" >确 定</el-button>
                        <el-button @click="cancelBtn" type="primary">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            info:'',
            imgUrl:'',
            dialogVisible:false,
            dialogVisible1:false,
            id:'',
            dictArr:'',
            infos:{
                id:'',
                score:''
            },  
            rules: {
                score: [
                    { required: true, message: '请输入评分', trigger: 'blur' },
                    { type: 'number', message: '评分必须为数字值'}
                ],
            }
        }
    },
    created() {
        this.id  = this.$router.currentRoute.query.id;
        if(this.id){
            this.getDictArr()
            this.getDetail(); 
        }
    },
    methods: {
        reply(id){
           this.infos.score = ''
           this.infos.id = id;
           this.dialogVisible1 = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let url = CONSTANT.URL.PROJECT.GRADESTAFF;
                let param = JSON.stringify(this.infos);
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '评分成功!'
                        });
                        this.getDetail();  
                        this.dialogVisible1 = false; 
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        cancelBtn(){
            this.dialogVisible1 = false
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        getDetail(){
           let url = CONSTANT.URL.PROJECT.FINDPROJECTBYID;
           let data = {
               id:this.id
           } ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
               this.info = res.data.bussData 
           }) 
        },
        getDictArr(){
            let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY;
           let data = {
               id:this.id
           } ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
              this.dictArr = res.data.bussData;
           }) 
            
        },
        returnparts(e){
            let str;
            this.dictArr.role.map((item)=>{
                if(item.key == e){
                    str = item.value
                }
            })
            return str;
        },
        returnRole(e){
            let str;
            this.dictArr.role.map((item)=>{
                if(item.key == e){
                    str = item.value
                }
            })
            return str;
        },
        returnPart(e){
            let str;
            this.dictArr.parts.map((item)=>{
                if(item.key == e){
                    str = item.value
                }
            })
            return str;
        },
        returnStatus(e){
            let str;
            this.dictArr.partsStatus.map((item)=>{
                if(item.key == e){
                    str = item.value
                }
            })
            return str;
        },
        returnTool(e){
            let str;
            this.dictArr.tools.map((item)=>{
                if(item.key == e){
                    str = item.value
                }
            })
            return str;
        }

    }
}
</script>

<style lang="scss" scoped>
    .project-detail{
        font-size:12px;
        .main-wrap{
            border: 1px solid #dedede; 
            border-bottom: 0;
            width: 1100px;
            .main-list{
                height: 80px;
                line-height: 80px;
                flex: 1;
                -webkit-flex: 1;
                border-bottom: 1px solid #ccc;
                .name{
                    height: 80px;
                    line-height: 80px;
                    width: 120px;
                    background-color: #beeae4;
                    text-align: center;
                    border-bottom: 1px solid #ccc;
                }
                .value{
                    height: 80px;
                    line-height: 80px;
                    width: 95%;
                    padding-left: 5%;
                    img{
                        position: relative;
                        top: 10px;
                        height: 70px;
                        margin-right: 20px;
                        cursor: pointer;
                        vertical-align: inherit!important;
                    }
                }
            }
        }
        .main-body{
            width: 1100px;
            font-size:12px;
            margin-top: 50px;
            border: 1px solid #dedede;
            
            .body-left{
                width: 110px;
                background-color: #beeae4;
                text-align: center;
                border-bottom: 1px solid #dedede;
                box-sizing: border-box;
            }
            .body-right{
                width: 100%;
                .right-menu{
                    .menu-head{
                        .head-title{
                            flex: 1;
                            -webkit-flex: 1;
                            height: 60px;
                            background-color: #f5f5f5;
                            border-right: 1px solid #dedede;
                        }
                    }
                    .menu-wrap{
                      
                        .wrap-right{
                            width: 100%;
                            .right-list{
                                border-bottom: 1px solid #dedede;
                                &:last-child{
                                    border-bottom: 0;
                                }
                                .wrap-val{
                                    height: 60px;
                                    width: 20%;
                                    border-right: 1px solid #dedede;
                                    text-align: center;
                                    .reply-btn{
                                        width: 60px;
                                        height: 40px;
                                        line-height: 40px;
                                        border: 1px solid #dedede;
                                        text-align: center;
                                        border-radius: 5px;
                                        -webkit-border-radius: 5px;
                                        cursor: pointer;
                                        &:hover{
                                            background-color: #fef1f1;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .date-item{
                    height: 60px;
                    border-top: 1px solid #dedede;
                    .date-list{
                        width: 33.33%;
                        border-right: 1px solid #dedede;
                    }
                }
            }
            .lists{
                flex: 1;
                -webkit-flex: 1;
                border-top: 1px solid #dedede;
                .name{
                    width: 112px;
                    height: 60px;
                    background-color: #beeae4;
                    border-right: 1px solid #dedede;
                    box-sizing: border-box;
                }
                .value{
                    width:92%;
                }
                &.dates{
                    .name{
                        width:35%;
                    }
                }
            }
            .detail-left{
                border-top: 1px solid #dedede;
                background-color: #beeae4;
                border-right: 1px solid #dedede;
                width:110px;
                box-sizing: border-box;
            }
            .detail-value{
                width:96%;
                border-top: 1px solid #dedede;
                min-height:60px;
                padding:2%;
            }
            .total-value{
                width:100%;
                border-top: 1px solid #dedede;
                .total-item{
                    &.head{
                      border-bottom: 1px solid #dedede;  
                      background-color: #f5f5f5;
                    }
                    .total-list{
                        height:60px;
                        flex:1;
                        -webkit-flex:1;
                        border-right: 1px solid #dedede;
                    }
                }
            }
        }
    }

</style>
